<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="J-nav">
        <a href="javascript:;" data-type="all">全部课程</a>
        <a href="javascript:;" data-type="free">免费课程</a>
        <a href="javascript:;" data-type="vip">VIP课程</a>
    </div>
    <ul class="J-list">
    </ul>


    <!-- JSON 数据 -->
    <div class="J-data" style="display: none;">
        [{ "id": "1", "course": "前端开发之企业级深度JavaScript特训课【JS++前端】", "classes": "19", "teacher": "小野", "img":
        "ecmascript.jpg", "is_free": "1", "datetime": "1540454477", "price": "0" },
        { "id": "2", "course": "WEB前端工程师就业班之深度JS DOM+讲师辅导-第3期【JS++前端】", "classes": "22", "teacher": "小野", "img":
        "dom.jpg", "is_free": "0", "datetime": "1540454477", "price": "699" },
        { "id": "3", "course": "前端开发之企业级深度HTML特训课【JS++前端】", "classes": "3", "teacher": "小野", "img": "html.jpg",
        "is_free": "1", "datetime": "1540454477", "price": "0" },
        { "id": "4", "course": "前端开发之企业级深度CSS特训课【JS++前端】", "classes": "5", "teacher": "小野", "img": "css.jpg", "is_free":
        "1", "datetime": "1540454477", "price": "0" },
        { "id": "5", "course": "前端就业班VueJS+去哪儿网+源码课+讲师辅导-第3期【JS++前端】", "classes": "50", "teacher": "哈默", "img":
        "vuejs.jpg", "is_free": "0", "datetime": "1540454477", "price": "1280" },
        { "id": "6", "course": "前端就业班ReactJS+新闻头条实战+讲师辅导-第3期【JS++前端】", "classes": "21", "teacher": "托尼", "img":
        "reactjs.jpg", "is_free": "0", "datetime": "1540454477", "price": "2180" },
        { "id": "7", "course": "WEB前端开发工程师就业班-直播/录播+就业辅导-第3期【JS++前端】", "classes": "700", "teacher": "JS++名师团", "img":
        "jiuyeban.jpg", "is_free": "0", "datetime": "1540454477", "price": "4980" }]

    </div>

    <!-- 模板 -->
    <script type="text/html" id="J-tpl">
        <li>{{course}}</li> <hr />
    </script>

    <!-- 工具函数 -->
    <script type="text/javascript">
        Array.prototype.myForEach = function (fn) {
            var arr = this,
                len = arr.length,
                item,
                arg2 = arguments[1] || window;

            for (var i = 0; i < len; i++) {
                fn.apply(arg2, [arr[i], i, arr]);
            }
        }

        Array.prototype.myFifter = function (fn) {
            var arr = this,
                len = arr.length,
                item,
                arg2 = arguments[1] || window,
                nArr = [];

            for (var i = 0; i < len; i++) {
                item = arr[i];
                fn.apply(arg2, [item, i, arr]) ? nArr.push(item) : '';
            }
            return nArr;
        }

        Array.prototype.myMap = function (fn) {
            var arr = this,
                len = arr.length,
                arg2 = arguments[1] || window,
                item,
                nArr = [];

            for (var i = 0; i < len; i++) {
                item = tools.deepclone(arr[i]);
                nArr.push(fn.apply(arg2, [item, i, arr]));
            }

            return nArr;
        }


    </script>


    <script type="text/javascript">
            ; (function () {
                var data = JSON.parse(document.getElementsByClassName('J-data')[0].innerHTML),
                    oTpl = document.getElementById('J-tpl').innerHTML,
                    oList = document.getElementsByClassName('J-list')[0],
                    oNav = document.getElementsByClassName('J-nav')[0];

                function init() {
                    renderList(fifterData(data, 'all'));
                    bindEvent();
                }

                function bindEvent() {
                    // 事件代理
                    oNav.addEventListener('click', oListClick, false);
                }

                function oListClick(e) {
                    var e = e || window.event,
                        tar = e.target || e.srcEvent,
                        tagName = tar.tagName.toLowerCase();


                    if (tagName === 'a') {
                        var tarType = tar.getAttribute('data-type');

                        renderList(fifterData(data, tarType));
                    }
                }

                // 将数据渲染到页面
                function renderList(data) {
                    var list = '';
                    data.myForEach(function (elem, index, arr) {
                        list += oTpl.replace(/{{(.*?)}}/g, function (node, key) {
                            return {
                                course: elem.course
                            }[key];
                        });
                    });

                    oList.innerHTML = list;
                }

                // 筛选数据
                function fifterData(data, tarType) {
                    var nArr = data.myFifter(function (item, index, arr) {
                        switch (tarType) {
                            case 'all':
                                return true;
                                break;
                            case 'free':
                                return (item.is_free == 1);
                                break;
                            case 'vip':
                                return (item.is_free == 0);
                                break;
                            default:
                                return true;
                        }
                    });
                    return nArr;
                }

                init();
            })();

    </script>
</body>

</html>